{extend name="public:m_base" /}
{block name="main"}
    <!-- <div class="ShareAnySeparate"></div> -->
    <div class="ShareAnyContainer clrd" style="font-size: 0.8rem;">
        当前位置：<a href="{:url('shop/index/index')}" class="clrd" title="首页">首页</a>&nbsp;&nbsp;/&nbsp;&nbsp;<a
            href="{:url('shop/artwork/group')}" title="艺术品" class="clrd">艺术品</a>
    </div>
    <div class="ShareAnyContainer">
    </div>
    <div class="ShareAnySeparate"></div>
    <div class="ShareAnyContainer">
        <div class="titleBig">
            艺术家
        </div>
    </div>
    <div class="ShareAnySeparate"></div>
    <div class="ShareAnyContainer">
        <div class="artists ShareAnyLeft" style="margin-left:0px;    width: 100%;">
            <ul>
                {volist name="artist" id="v"}
                    {if condition="$key lt 10"}
                        <li class="artist_show">
                            <a href="{:url('shop/artists/detail',['id'=>$v['id']])}/">
                                <img src="/{$v['getimgpath']['path']}" class="imgHead">
                                <span class="clbl">{$v['name']}</span>
                            </a>
                        </li>
                        {else/}
                        <li class="artist_show more" style="display: none;">
                            <a href="{$v['id']}/">
                                <img src="/{$v['getimgpath']['path']}"><span class="clbl">{$v['name']}</span>
                            </a>
                        </li>
                    {/if}
                {/volist}

            </ul>
        </div>
        <div class="ShareAnyClear"></div>
        <!-- <div style="text-align: center;" class="show_hide"><a href="javascript:void(0);">更多...</a></div> -->
        <div style="text-align: center;display: none;" class="hide_hide"><a href="javascript:void(0);">收起</a></div>
    </div>
    <div class="ShareAnySeparate"></div>
    <div class="ShareAnyContainer">
        <div class="line"></div>
    </div>
    <div class="ShareAnySeparate"></div>
    <div class="ShareAnyContainer">
        <div class="titleBig">
            艺术品
        </div>
    </div>
    <div class="ShareAnySeparate"></div>
    <div class="ShareAnyContainer clbl" style="font-size: 12px;">
        排序：<a href="?order=1" class="clbl">更新时间</a>&nbsp;&nbsp;<a class="clbl" href="?order=2">价格升序</a>&nbsp;&nbsp;<a class="clbl" href="?order=3">价格降序</a>
    </div>
    <div class="ShareAnySeparate"></div>
    <div class="ShareAnyContainer">
        <div class="work_parent">
            <div class="work">
                  <ul>
                      {volist name="artworks" id="artwork"}
                      <li>
                          <a href="{:url('shop/artwork/detail',['id'=>$artwork['id']])}/">
                              <img src="/{$artwork['img']['0']}">
                              <p class="clbl p111">{$artwork['title']|mb_substr=###,0,18,'utf-8'}</p>
                              <p class="clbl p222">作者：{$artwork['getartist']['name']}</p>

                          </a>
                      </li>
                      {/volist}
                  </ul>
            </div>
            <div class="ShareAnyClear"></div>
        </div>

    </div>
    <div class="ShareAnySeparate"></div>
    <div class="ShareAnyContainer">
        <div class="page">{$artworks->render()}</div>

    </div>
<style>
    .ShareAnyLeft img{
        width: 90%;
        padding:0 5%;
    }
    .artists span{
        width: 100%;
        margin-top:10px;
    }
    .work li span{
        position: absolute;
        bottom: 10px;
        right: 6px;
    }
    .work li .p222{
        position: absolute;
        top: 145px;
        text-align: center;
        display: block;
        width: 100%;
    }
    .work li .p111{
        position: absolute;
        top: 136px;
        text-align: center;
        display: block;
        width: 100%;
    }
    .work li{
        width: 30%;

        height:164px;
        margin:0 1%;
        margin-top:14px;
        position: relative;
    }
    .work{
        font-size: 0.2rem;
    }
    .work a{
        height: 110px;
    }

    .work img{
        max-width:100%;
    }
    .artists li{

        width: 25%;    height: 100px;
    }
.imgHead{
    width: 4rem !important;
    height: 4rem;
    border-radius: 100%;
}
</style>
{/block}
{/block}

{block name="footer"}
    <script>
        $(document).ready(function () {
            $(".show_hide").on("click", function () {
                $(".more").show();
                $(this).hide();
                $(".hide_hide").show();
            });
            $(".hide_hide").on("click", function () {
                $(".more").hide();
                $(this).hide();
                $(".show_hide").show();
            });
        });
    </script>

{/block}